<template>
<div>

  <el-dialog title="添加学生" :visible.sync="addflag" >
    <!-- 表单的内容，里面的每一个控件都有一个el-form-item的栏目格式用来规定label以及位置 -->
    <div>
      <el-form label-width="80px">
        <el-form-item label="学生姓名">
          <el-input v-model="AddStudentParam.studentName" clearable></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="AddStudentParam.studentAge" ></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <template>
            <el-radio v-model="AddStudentParam.studentSex" label="男">男</el-radio>
            <el-radio v-model="AddStudentParam.studentSex" label="女">女</el-radio>
          </template>
        </el-form-item>
        <el-form-item label="学生编号">
          <el-input v-model="AddStudentParam.studentNum"></el-input>
        </el-form-item>
        <el-form-item label="班级">
          <el-select v-model="AddStudentParam.classId" placeholder="请选择">
            <el-option
                v-for="item in classes"
                :key="item.classId"
                :label="item.className"
                :value="item.classId">
            </el-option>
          </el-select>
        </el-form-item>

      </el-form>
    </div>
    <!-- 弹出框底部的两个按钮 -->
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="toNull()">重 置</el-button>
      <el-button type="primary"  @click="addStu">提 交</el-button>
    </div>
  </el-dialog>



  <el-button type="primary" @click="addflag=!addflag">添加学生</el-button>
    班级：<el-select v-model="getStusParam.classId" @change="getStus" placeholder="请选择班级">
        <el-option
                v-for="item in classes"
                :key="item.classId"
                :label="item.className"
                :value="item.classId">
        </el-option>
    </el-select>
  <el-table
      :data="students"
      style="width: 100%"

  >
<!--    @selection-change="select"-->
<!--    <el-table-column-->
<!--        type="selection"-->
<!--        width="55"-->

<!--    >-->
<!--    </el-table-column>-->


    <el-table-column
        prop="studentId"
        label="id"
        width="60">
    </el-table-column>
    <el-table-column
        prop="studentName"
        label="学生名"
        width="70">
    </el-table-column>

    <el-table-column
        prop="studentSex"
        label="性别"
        width="100"
    >
    </el-table-column>
    <el-table-column
        prop="studentNum"
        label="学生标号"
        width="100"
    >
    </el-table-column>
    <el-table-column
        prop="studentAge"
        label="年龄"
        width="100"
    >
    </el-table-column>
    <el-table-column label="班级"
                     width="85">
      <template slot-scope="scope">
        {{getClassById(scope.row.classId)}}
      </template>
    </el-table-column>

    <el-table-column
        prop="userId"
        label="推荐人"
        width="100"
    > </el-table-column>
    <el-table-column
        prop="createTime"
        label="入学时间"
        width="100"
    ></el-table-column>

    <el-table-column label="操作"
                     width="300">
      <template slot-scope="scope">

<!--        <el-button @click="getOne(scope.row.movieId)" type="warning" icon="el-icon-edit" circle ></el-button>-->
<!--        <el-button @click="delOne(scope.row.movieId)" type="danger" icon="el-icon-delete" circle ></el-button>-->
      </template>
    </el-table-column>


  </el-table>
  <div class="block">
    <el-pagination
        layout="prev, pager, next"
        :total="total" :page-size="getStusParam.pageSize"
        :current-page="getStusParam.pageIndex"
        @current-change="pageChange"
    >
    </el-pagination>
  </div>
</div>
</template>

<script>

export default {
  name: "student",

  data(){

    return {
      students:[],
      total:null,
      getStusParam:{
        pageSize:5,
        pageIndex: 1,
        studentName:null,
        studentSex:null,
        classId:null
      },
      classes:[],
      AddStudentParam:{
        studentName:null,
        studentSex:null,
        studentNum:null,
        studentAge:null,
        classId:null
    },
      addflag:false

    }

  },
  methods:{
    getStus(){
      this.$http.post("/woniuStudent/like",this.getStusParam).then(
           (resp)=> {
            console.log(resp);
            this.students = resp.data.object.stus;
            this.total = resp.data.object.total;
            this.getStusParam.pageIndex = resp.data.object.pageIndex;
          }
      )
    },
    pageChange(p){
      if (p!=undefined||p!=null)
        this.getStusParam.pageIndex=p;
      this.getStus();
    },
    getClasses(){
      this.$http.get("/woniuClass/classes").then(
          (resp)=>{
            this.classes=resp.data.object;
          }
      )
    },
    getClassById(id){
      let className = null
      this.classes.forEach(value=>{
        if (value.classId==id)
          className= value.className;
      })
      return className
    },
    addStu(){
      this.$http.post("/woniuStudent/save",this.AddStudentParam).then((resp)=>{
        if (resp.data.code==20000)
          this.$message({
            message: resp.data.message,
            type: 'success'
          });
        this.addflag=false;
        this.toNull();
        this.getStus();
      })
    },
    toNull() {
      this.AddStudentParam={
        studentName:null,
        studentSex:null,
        studentNum:null,
        studentAge:null,
        classId:null
      }
    }


  },


  created(){
    this.getClasses();
    this.getStus();
  }

}
</script>

<style scoped>

</style>